<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>投票详情 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --secondary: #7c3aed;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-tertiary: #94a3b8;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 12px;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        .nav-btn.primary {
            color: var(--primary);
        }
        
        /* 投票卡片 */
        .vote-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin: 16px;
            overflow: hidden;
        }
        
        .vote-header {
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .vote-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .vote-creator {
            flex: 1;
        }
        
        .creator-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .vote-meta {
            font-size: 13px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .vote-time {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .vote-status {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
        }
        
        .vote-menu {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 18px;
        }
        
        .vote-content {
            padding: 16px;
        }
        
        .vote-title {
            font-size: 19px;
            font-weight: 600;
            margin-bottom: 12px;
            line-height: 1.4;
        }
        
        .vote-description {
            font-size: 16px;
            color: var(--text-secondary);
            margin-bottom: 16px;
            line-height: 1.5;
        }
        
        /* 投票选项通用样式 */
        .vote-options {
            margin-bottom: 16px;
        }
        
        .vote-option {
            padding: 14px;
            border-radius: 8px;
            border: 1px solid var(--border-light);
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }
        
        .vote-option:hover:not(.voted) {
            border-color: var(--primary);
            background-color: rgba(79, 70, 229, 0.03);
        }
        
        .vote-option.selected {
            border-color: var(--primary);
            background-color: rgba(79, 70, 229, 0.05);
        }
        
        .option-check {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid var(--text-tertiary);
            display: none;
        }
        
        .vote-option.selected .option-check {
            display: block;
            background-color: var(--primary);
            border-color: var(--primary);
            position: relative;
        }
        
        .vote-option.selected .option-check::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 4px;
            top: 5px;
            left: 4px;
            border-left: 2px solid white;
            border-bottom: 2px solid white;
            transform: rotate(-45deg);
        }
        
        .option-text {
            font-size: 16px;
            margin-bottom: 8px;
            padding-right: 34px;
        }
        
        .option-stats {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .option-bar-container {
            flex: 1;
            height: 6px;
            background-color: var(--bg-light);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .option-bar {
            height: 100%;
            background-color: var(--primary);
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        
        .option-count {
            font-size: 13px;
            color: var(--text-tertiary);
            width: 60px;
            text-align: right;
        }
        
        /* 多图投票样式 */
        .vote-multi-image .option-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .vote-multi-image .option-image {
            aspect-ratio: 1/1;
            overflow: hidden;
        }
        
        .vote-multi-image .option-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 投票底部信息 */
        .vote-footer {
            padding: 0 16px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .vote-info {
            font-size: 14px;
            color: var(--text-tertiary);
        }
        
        .vote-action {
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 500;
            border: none;
            background-color: var(--primary);
            color: white;
        }
        
        .vote-action.voted {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        /* 投票互动区 */
        .vote-actions {
            padding: 12px 16px;
            display: flex;
            justify-content: space-around;
            border-top: 1px solid var(--border-light);
        }
        
        .vote-action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 13px;
            padding: 4px 12px;
        }
        
        .vote-action-btn i {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .vote-action-btn.active {
            color: var(--primary);
        }
        
        /* 投票结果统计 */
        .results-section {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin: 0 16px 16px;
            padding: 16px;
        }
        
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .results-title {
            font-size: 17px;
            font-weight: 600;
        }
        
        .results-toggle {
            color: var(--primary);
            background: none;
            border: none;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .results-chart {
            height: 200px;
            margin-bottom: 16px;
            background-color: var(--bg-light);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
        }
        
        /* 评论区 */
        .comments-section {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin: 0 16px 16px;
            padding: 16px;
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .comments-title {
            font-size: 17px;
            font-weight: 600;
        }
        
        .comments-count {
            color: var(--text-tertiary);
            font-size: 14px;
        }
        
        .comment-input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-input-container {
            flex: 1;
        }
        
        .comment-input {
            width: 100%;
            padding: 10px 12px;
            border-radius: 18px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
            resize: none;
            height: 36px;
            overflow: hidden;
        }
        
        .comment-input:focus {
            border-color: var(--primary);
        }
        
        .comment-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 8px;
        }
        
        .comment-btn {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 14px;
            border: none;
        }
        
        .cancel-btn {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .send-btn {
            background-color: var(--primary);
            color: white;
        }
        
        /* 评论列表 */
        .comments-list {
            margin-bottom: 16px;
        }
        
        .comment-item {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
        }
        
        .comment-content {
            flex: 1;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        
        .comment-author {
            font-size: 14px;
            font-weight: 600;
        }
        
        .comment-time {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .comment-text {
            font-size: 15px;
            margin-bottom: 6px;
            padding: 8px 12px;
            background-color: var(--bg-light);
            border-radius: 8px;
        }
        
        .comment-actions {
            display: flex;
            gap: 16px;
        }
        
        .comment-action-btn {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .comment-action-btn:hover {
            color: var(--primary);
        }
        
        /* 回复样式 */
        .replies-list {
            margin-left: 46px;
            margin-top: 10px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .reply-content {
            flex: 1;
        }
        
        .reply-text {
            font-size: 14px;
            margin-bottom: 4px;
            padding: 6px 10px;
            background-color: var(--bg-light);
            border-radius: 6px;
        }
        
        .reply-text .author {
            font-weight: 600;
            color: var(--primary);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">投票详情</div>
        <button class="nav-btn primary" id="shareBtn">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- 投票卡片 -->
    <div class="vote-card vote-multi-image">
        <div class="vote-header">
            <img src="https://picsum.photos/id/66/100/100" alt="创建者头像" class="vote-avatar">
            <div class="vote-creator">
                <div class="creator-name">旅行俱乐部</div>
                <div class="vote-meta">
                    <div class="vote-time">
                        <i class="far fa-clock"></i> 3天前
                    </div>
                    <div class="vote-status">剩余5天</div>
                </div>
            </div>
            <button class="vote-menu" id="voteMenuBtn">
                <i class="fas fa-ellipsis-h"></i>
            </button>
        </div>
        
        <div class="vote-content">
            <h3 class="vote-title">下个月团建目的地投票，你想去哪里？</h3>
            <p class="vote-description">为了让大家有更好的团建体验，我们筛选了三个热门目的地，每人限投一票，得票最多的将作为最终目的地。投票截止后将在本群组公布结果并安排后续事宜。</p>
            
            <div class="vote-options">
                <div class="vote-option" data-option="1">
                    <div class="option-images">
                        <div class="option-image">
                            <img src="https://picsum.photos/id/42/300/300" alt="目的地图片1">
                        </div>
                        <div class="option-image">
                            <img src="https://picsum.photos/id/43/300/300" alt="目的地图片2">
                        </div>
                        <div class="option-image">
                            <img src="https://picsum.photos/id/44/300/300" alt="目的地图片3">
                        </div>
                    </div>
                    <div class="option-text">海滨度假村 - 包含海鲜大餐和水上活动</div>
                    <div class="option-check"></div>
                    <div class="option-stats">
                        <div class="option-bar-container">
                            <div class="option-bar" style="width: 60%;"></div>
                        </div>
                        <div class="option-count">32票 (60%)</div>
                    </div>
                </div>
                
                <div class="option-voters" style="padding-left: 14px; margin-top: -8px; margin-bottom: 16px;">
                    <div style="display: flex; align-items: center; font-size: 13px; color: var(--text-tertiary);">
                        <div style="display: flex; margin-right: 8px;">
                            <img src="https://picsum.photos/id/91/100/100" alt="投票人" style="width: 20px; height: 20px; border-radius: 50%; margin-right: -5px; border: 2px solid white;">
                            <img src="https://picsum.photos/id/92/100/100" alt="投票人" style="width: 20px; height: 20px; border-radius: 50%; margin-right: -5px; border: 2px solid white;">
                            <img src="https://picsum.photos/id/93/100/100" alt="投票人" style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid white;">
                        </div>
                        包括 张三、李四 等 32 人
                    </div>
                </div>
                
                <div class="vote-option" data-option="2">
                    <div class="option-images">
                        <div class="option-image">
                            <img src="https://picsum.photos/id/45/300/300" alt="目的地图片1">
                        </div>
                        <div class="option-image">
                            <img src="https://picsum.photos/id/46/300/300" alt="目的地图片2">
                        </div>
                        <div class="option-image">
                            <img src="https://picsum.photos/id/47/300/300" alt="目的地图片3">
                        </div>
                    </div>
                    <div class="option-text">山林民宿 - 包含徒步和烧烤活动</div>
                    <div class="option-check"></div>
                    <div class="option-stats">
                        <div class="option-bar-container">
                            <div class="option-bar" style="width: 30%;"></div>
                        </div>
                        <div class="option-count">16票 (30%)</div>
                    </div>
                </div>
                
                <div class="option-voters" style="padding-left: 14px; margin-top: -8px; margin-bottom: 16px;">
                    <div style="display: flex; align-items: center; font-size: 13px; color: var(--text-tertiary);">
                        <div style="display: flex; margin-right: 8px;">
                            <img src="https://picsum.photos/id/94/100/100" alt="投票人" style="width: 20px; height: 20px; border-radius: 50%; margin-right: -5px; border: 2px solid white;">
                            <img src="https://picsum.photos/id/95/100/100" alt="投票人" style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid white;">
                        </div>
                        包括 王五 等 16 人
                    </div>
                </div>
                
                <div class="vote-option" data-option="3">
                    <div class="option-images">
                        <div class="option-image">
                            <img src="https://picsum.photos/id/48/300/300" alt="目的地图片1">
                        </div>
                        <div class="option-image">
                            <img src="https://picsum.photos/id/49/300/300" alt="目的地图片2">
                        </div>
                        <div class="option-image">
                            <img src="https://picsum.photos/id/50/300/300" alt="目的地图片3">
                        </div>
                    </div>
                    <div class="option-text">古镇风情 - 包含文化体验和特色美食</div>
                    <div class="option-check"></div>
                    <div class="option-stats">
                        <div class="option-bar-container">
                            <div class="option-bar" style="width: 10%;"></div>
                        </div>
                        <div class="option-count">5票 (10%)</div>
                    </div>
                </div>
                
                <div class="option-voters" style="padding-left: 14px; margin-top: -8px;">
                    <div style="display: flex; align-items: center; font-size: 13px; color: var(--text-tertiary);">
                        <div style="display: flex; margin-right: 8px;">
                            <img src="https://picsum.photos/id/96/100/100" alt="投票人" style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid white;">
                        </div>
                        包括 赵六 等 5 人
                    </div>
                </div>
            </div>
        </div>
        
        <div class="vote-footer">
            <div class="vote-info">已有 53 人参与投票 · 3个选项</div>
            <button class="vote-action" id="voteBtn">投票</button>
        </div>
        
        <div class="vote-actions">
            <button class="vote-action-btn comment-btn active">
                <i class="far fa-comment"></i>
                <span>评论(27)</span>
            </button>
            <button class="vote-action-btn share-btn">
                <i class="far fa-share-alt"></i>
                <span>分享</span>
            </button>
            <button class="vote-action-btn favorite-btn">
                <i class="far fa-bookmark"></i>
                <span>收藏</span>
            </button>
            <button class="vote-action-btn like-btn">
                <i class="far fa-heart"></i>
                <span>点赞(42)</span>
            </button>
        </div>
    </div>
    
    <!-- 投票结果统计 -->
    <div class="results-section">
        <div class="results-header">
            <h3 class="results-title">投票结果统计</h3>
            <button class="results-toggle" id="resultsToggleBtn">
                <span>查看详情</span>
                <i class="fas fa-chevron-down"></i>
            </button>
        </div>
        
        <div class="results-chart">
            <i class="fas fa-chart-pie" style="font-size: 40px;"></i>
        </div>
        
        <div class="results-summary">
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px;">
                <span>总参与人数</span>
                <span style="font-weight: 600;">53人</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px;">
                <span>投票热度</span>
                <span style="font-weight: 600; color: var(--primary);">高</span>
            </div>
            <div style="display: flex; justify-content: space-between; font-size: 14px;">
                <span>截止时间</span>
                <span style="font-weight: 600;">5天后 20:00</span>
            </div>
        </div>
    </div>
    
    <!-- 评论区 -->
    <div class="comments-section">
        <div class="comments-header">
            <h3 class="comments-title">
                评论
                <span class="comments-count">(27)</span>
            </h3>
        </div>
        
        <!-- 评论输入框 -->
        <div class="comment-input-group">
            <img src="https://picsum.photos/id/64/100/100" alt="你的头像" class="comment-avatar">
            <div class="comment-input-container">
                <textarea class="comment-input" placeholder="发表你的看法..."></textarea>
                <div class="comment-actions">
                    <button class="comment-btn cancel-btn">取消</button>
                    <button class="comment-btn send-btn">发送</button>
                </div>
            </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list">
            <!-- 评论1 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/81/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">李明</span>
                        <span class="comment-time">2天前</span>
                    </div>
                    <div class="comment-text">我推荐海滨度假村，这个季节去海边温度正好，而且可以开展很多团队活动，增进大家的感情。</div>
                    <div class="comment-actions">
                        <button class="comment-action-btn like-comment">
                            <i class="far fa-heart"></i> 12
                        </button>
                        <button class="comment-action-btn reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </button>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/82/100/100" alt="回复者头像" class="comment-avatar">
                            <div class="reply-content">
                                <div class="comment-header">
                                    <span class="comment-author">王芳</span>
                                    <span class="comment-time">2天前</span>
                                </div>
                                <div class="reply-text">
                                    <span class="author">@李明</span> 我也觉得海边不错，就是不知道住宿条件怎么样？
                                </div>
                                <div class="comment-actions">
                                    <button class="comment-action-btn like-comment">
                                        <i class="far fa-heart"></i> 3
                                    </button>
                                    <button class="comment-action-btn reply-btn">
                                        <i class="far fa-reply"></i> 回复
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/81/100/100" alt="回复者头像" class="comment-avatar">
                            <div class="reply-content">
                                <div class="comment-header">
                                    <span class="comment-author">李明</span>
                                    <span class="comment-time">1天前</span>
                                </div>
                                <div class="reply-text">
                                    <span class="author">@王芳</span> 我查过了，那边的度假村评价很好，是海景房，设施也比较新。
                                </div>
                                <div class="comment-actions">
                                    <button class="comment-action-btn like-comment">
                                        <i class="far fa-heart"></i> 5
                                    </button>
                                    <button class="comment-action-btn reply-btn">
                                        <i class="far fa-reply"></i> 回复
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论2 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/83/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">张伟</span>
                        <span class="comment-time">1天前</span>
                    </div>
                    <div class="comment-text">山林民宿比较安静，适合团队建设活动，而且可以烧烤，晚上还能看星星，感觉不错。</div>
                    <div class="comment-actions">
                        <button class="comment-action-btn like-comment">
                            <i class="far fa-heart"></i> 8
                        </button>
                        <button class="comment-action-btn reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 评论3 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/84/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">旅行俱乐部</span>
                        <span class="comment-time">1天前</span>
                    </div>
                    <div class="comment-text">感谢大家的积极参与！无论最终选择哪个目的地，我们都会安排丰富的活动和舒适的住宿，请大家放心投票。</div>
                    <div class="comment-actions">
                        <button class="comment-action-btn like-comment">
                            <i class="far fa-heart"></i> 15
                        </button>
                        <button class="comment-action-btn reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多评论 -->
        <button class="btn btn-light w-100" style="border-radius: 8px; font-size: 14px;">
            加载更多评论
        </button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-calendar-alt nav-icon"></i>
            <span>活动</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-poll nav-icon"></i>
            <span>投票</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- 投票操作菜单 -->
    <div class="modal fade" id="voteMenuModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-flag text-danger me-2"></i> 举报投票
                    </button>
                    <div class="dropdown-divider m-0"></div>
                    <button class="btn w-100 text-start px-4 py-3 border-0 text-danger" style="font-size: 15px;">
                        <i class="fas fa-ban me-2"></i> 屏蔽创建者
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const shareBtn = document.getElementById('shareBtn');
        const voteBtn = document.getElementById('voteBtn');
        const voteMenuBtn = document.getElementById('voteMenuBtn');
        const resultsToggleBtn = document.getElementById('resultsToggleBtn');
        const voteOptions = document.querySelectorAll('.vote-option');
        const commentBtn = document.querySelector('.comment-btn');
        const shareActionBtn = document.querySelector('.share-btn');
        const favoriteBtn = document.querySelector('.favorite-btn');
        const likeBtn = document.querySelector('.like-btn');
        const replyBtns = document.querySelectorAll('.reply-btn');
        const likeCommentBtns = document.querySelectorAll('.like-comment');
        const commentInput = document.querySelector('.comment-input');
        const sendCommentBtn = document.querySelector('.send-btn');
        const cancelCommentBtn = document.querySelector('.cancel-btn');
        const toast = document.getElementById('toast');
        const voteMenuModal = new bootstrap.Modal(document.getElementById('voteMenuModal'));
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 自动调整评论输入框高度
        function adjustTextareaHeight() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight > 100 ? 100 : this.scrollHeight) + 'px';
        }
        
        // 绑定事件
        function bindEvents() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 分享按钮
            shareBtn.addEventListener('click', () => {
                showToast('分享链接已复制到剪贴板');
            });
            
            // 投票菜单按钮
            voteMenuBtn.addEventListener('click', () => {
                voteMenuModal.show();
            });
            
            // 投票结果展开/收起
            resultsToggleBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const text = this.querySelector('span');
                
                if (icon.classList.contains('fa-chevron-down')) {
                    icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
                    text.textContent = '收起详情';
                    showToast('已展开详细统计');
                    // 实际应用中这里会显示更详细的统计图表
                } else {
                    icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
                    text.textContent = '查看详情';
                    showToast('已收起详细统计');
                }
            });
            
            // 选择投票选项
            voteOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 如果已经投票则不能再选择
                    if (voteBtn.classList.contains('voted')) {
                        showToast('你已参与过此投票');
                        return;
                    }
                    
                    // 清除其他选项
                    voteOptions.forEach(opt => opt.classList.remove('selected'));
                    
                    // 选中当前选项
                    this.classList.add('selected');
                });
            });
            
            // 投票按钮
            voteBtn.addEventListener('click', function() {
                const selectedOption = document.querySelector('.vote-option.selected');
                
                if (this.classList.contains('voted')) {
                    showToast('你已参与过此投票');
                    return;
                }
                
                if (!selectedOption) {
                    showToast('请先选择一个选项');
                    return;
                }
                
                // 标记为已投票
                this.classList.add('voted');
                this.textContent = '已投票';
                
                // 更新投票统计（模拟）
                const optionBar = selectedOption.querySelector('.option-bar');
                const optionCount = selectedOption.querySelector('.option-count');
                const currentCount = parseInt(optionCount.textContent);
                const newCount = currentCount + 1;
                
                // 更新百分比
                const totalVotes = 53; // 当前总票数
                const newPercent = Math.round((newCount / (totalVotes + 1)) * 100);
                optionBar.style.width = `${newPercent}%`;
                optionCount.textContent = `${newCount}票 (${newPercent}%)`;
                
                // 更新总参与人数
                const voteInfo = document.querySelector('.vote-info');
                voteInfo.textContent = `已有 ${totalVotes + 1} 人参与投票 · 3个选项`;
                
                showToast('投票成功');
            });
            
            // 分享按钮
            shareActionBtn.addEventListener('click', function() {
                showToast('分享链接已复制到剪贴板');
            });
            
            // 收藏按钮
            favoriteBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (icon.classList.contains('far')) {
                    icon.classList.replace('far', 'fas');
                    this.classList.add('active');
                    showToast('已收藏该投票');
                } else {
                    icon.classList.replace('fas', 'far');
                    this.classList.remove('active');
                    showToast('已取消收藏');
                }
            });
            
            // 点赞按钮
            likeBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const text = this.querySelector('span');
                const currentLikes = parseInt(text.textContent.match(/\d+/)[0]);
                
                if (icon.classList.contains('far')) {
                    icon.classList.replace('far', 'fas');
                    this.classList.add('active');
                    text.textContent = `点赞(${currentLikes + 1})`;
                    showToast('已点赞');
                } else {
                    icon.classList.replace('fas', 'far');
                    this.classList.remove('active');
                    text.textContent = `点赞(${currentLikes - 1})`;
                    showToast('已取消点赞');
                }
            });
            
            // 评论输入框高度调整
            commentInput.addEventListener('input', adjustTextareaHeight);
            commentInput.addEventListener('focus', adjustTextareaHeight);
            
            // 发送评论
            sendCommentBtn.addEventListener('click', function() {
                const commentText = commentInput.value.trim();
                
                if (!commentText) {
                    showToast('请输入评论内容');
                    return;
                }
                
                showToast('评论发布成功');
                commentInput.value = '';
                commentInput.style.height = '36px';
                
                // 实际应用中这里会提交评论并刷新评论列表
            });
            
            // 取消评论
            cancelCommentBtn.addEventListener('click', function() {
                commentInput.value = '';
                commentInput.style.height = '36px';
            });
            
            // 回复按钮
            replyBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const author = this.closest('.comment-content, .reply-content').querySelector('.comment-author').textContent;
                    commentInput.value = `@${author} `;
                    commentInput.focus();
                    adjustTextareaHeight.call(commentInput);
                });
            });
            
            // 评论点赞
            likeCommentBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countText = this.childNodes[2].textContent.trim();
                    const currentCount = parseInt(countText);
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.replace('far', 'fas');
                        this.childNodes[2].textContent = ` ${currentCount + 1}`;
                        showToast('已点赞');
                    } else {
                        icon.classList.replace('fas', 'far');
                        this.childNodes[2].textContent = ` ${currentCount - 1}`;
                        showToast('已取消点赞');
                    }
                });
            });
        }
        
        // 初始化
        function init() {
            bindEvents();
        }
        
        // 启动
        init();
    </script>
</body>
</html>
